<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/css/bootstrap.min.css"
          rel="stylesheet"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"/>
</head>
<body>
<form action="./ajax02.do" method="POST" id="form01">
    学生ID：<input type="text" name="id"><br/>
    学生名称：<input type="text" name="name"><br/>
    学生年龄：<input type="text" name="age"><br/>
    学校：<input type="text" name="school"><br/>
    <button type="button" id="btn">提交</button>
</form>
<table class="table" id="tbl">

</table>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            //1.收集表单数据并且传递到后端
            // console.log($('#form01').serialize());
            $.ajax({
                url: './ajax02.do',
                dataType: 'text',
                // data: {
                //     id: $('input[name=id]').val(),
                //     name: $('input[name=name]').val(),
                //     age: $('input[name=age]').val(),
                //     school: $('input[name=school]').val(),
                //     param1: 'value1'
                // },
                data: $('#form01').serialize(),
                type: 'POST',
                // type: 'GET',
                success: function (data) {
                    console.log(data);
                    //2.获取后端返回的数据并且展示
                    //1.转换成JSON对象格式
                    var jsonObj = JSON.parse(data);
                    for (var i = 0; i < jsonObj.length; i++) {
                        var student = jsonObj[i];
                        $('#tbl').append("<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.age + "</td><td>" + student.school + "</td></tr>");
                    }
                }
            });
        });
    })
</script>
</body>
</html>